<template>
  <div>
    <template>
      <el-tabs :tab-position="tabPosition" style="height: 300px">
        <el-tab-pane
          :label="value.id + value.authName"
          v-for="(value, key) in tableData"
          :key="key"
        >
          <el-tabs :tab-position="tabPosition" style="height: 500px">
            <el-tab-pane
              :label="val.id + val.authName"
              v-for="(val, k) in value.children"
              :key="k"
              ><p
                v-text="v.id + v.authName"
                v-for="(v, x) in val.children"
                :key="x"
                style="
                  text-align: start;

                  line-height: 40px;
                "
              ></p
            ></el-tab-pane> </el-tabs
        ></el-tab-pane>
      </el-tabs>
    </template>
  </div>
</template>

<script>
export default {
  name: "VueRights",

  data() {
    return {
      tableData: {},
      tabPosition: "left",
    };
  },

  async mounted() {
    const { data } = await this.$axios.get("/rights/tree");
    console.log(data);
    this.tableData = data.data;
    this.$message({
      message: data.meta.msg,
      type: "success",
    });
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>